<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        body {
          margin: 0;
        }
        .container {
          height: 100px;
          width: 100%;
          background-color: #000;
          filter: contrast(40);
        }
        .text {
          font-size: 50px;
          color: #fff;
          font-weight: bold;
          line-height: 100px;
          text-align: center;
          /* 设置文字之间的间距 */
          letter-spacing: -50px; 
          /* filter: blur(10px); */
        }
        .animation-expand {
          animation: expand 1s ease-in both;
        }
      
        /* 展开动画 */
        @keyframes expand {
          0% {
            letter-spacing: -50px;
            filter: blur(10px);
          }
      
          100% {
            letter-spacing: 30px;
            filter: blur(0px);
          }
        }
      
        /* 动画执行结束后，将 container中的 filter 值设为 none */
        .filter-none {
          filter: none;
        }
      </style>
      <div class="container">
        <div class="text animation-expand">文字交融展开动画</div>
      </div>

      <script>
        /* 获取 .conatiner 元素 */
        const container = document.querySelector(".container");
        /* 获取 .conatiner 元素 */
        const text = document.querySelector(".text");
        /* 给 text元素添加 animationend事件
         当animation动画结束后 给 container 元素添加 class类 filter-none
          */
        text.addEventListener("animationend", function () {
          container.classList.add("filter-none");
        });
      </script>
</body>
</html>